import React, { useState } from "react";
import {
  NavBar,
  Space,
  Toast,
  Card,
  Button,
  Popup,
  Input,
  Form,
  Tabs,
  Checkbox,
} from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { DeleteOutline } from "antd-mobile-icons";
function Index() {
  let nav = useNavigate();
  const [visible1, setVisible1] = useState(false);
  let [value,setValue]=useState(false)

  return (
    <div>
      <NavBar onBack={() => nav(-1)}>填写订单</NavBar>
      <h4>票余紧张</h4>
      <div className="nm">
        <p>
          12:45 <br />
          北京大兴
        </p>
        <p>
          5时59分 <br />
          G101时刻表
        </p>
        <p>
          12:45 <br />
          虹桥
        </p>
        <p>￥672</p>
      </div>
      <div>
        <Card title="选择乘车人">
          <div>
            <p>姓名 ：小红</p>
            <p>证件号：15625866312002189 </p>
            <p>手机号：13355254263</p>
          </div>
          <br />
          <div >
            <p>姓名 ：小明</p>
            <p>证件号：1425896357802189 </p>
            <p>手机号：1338964883</p>
            <DeleteOutline fontSize={20} onClick={()=>setValue(false)} value={value}  onClose={() => {
              setValue(true);
            }}/>
          </div>
          <Button
            block
            shape="rounded"
            color="primary"
            onClick={() => setVisible1(true)}
          >
            添加/成人/学生/儿童
          </Button>
          <Popup
            visible={visible1}
            onMaskClick={() => {
              setVisible1(false);
            }}
            onClose={() => {
              setVisible1(false);
            }}
            bodyStyle={{ height: "40vh" }}
          >
            <Form
              layout="horizontal"
              footer={
                <Button block type="submit" color="primary" size="large">
                  添加
                </Button>
              }
            >
              <Checkbox>成人</Checkbox><Checkbox>学生</Checkbox><Checkbox>儿童</Checkbox>
              <Form.Item name="name" label="姓名">
                <Input
                  onChange={console.log}
                  placeholder="姓名与客户证件一致"
                />
              </Form.Item>
              <p>证件类型：身份证</p>
              <Form.Item name="number" label="证件号码">
                <Input
                  onChange={console.log}
                  placeholder="证件号码与客户证件一致"
                />
              </Form.Item>
              <Form.Item name="phone" label="手机号">
                <Input onChange={console.log} placeholder="请输入手机号" />
              </Form.Item>
            </Form>
          </Popup>
        </Card>
        <div>
          <Card title="坐席随心选">
            <Tabs className="nb">
              <Tabs.Tab title="第一程" key="fruits">
                <h4>在线选座 0/1</h4>
                靠窗<Checkbox>A</Checkbox>
                <Checkbox>B</Checkbox>
                <Checkbox>C</Checkbox>过道<Checkbox>D</Checkbox>
                <Checkbox>E</Checkbox>靠窗
                <h5>选车厢 11/人</h5>
                <div className="bn">
                <button>02</button>
              <button>03</button>
              <button>04</button>
              <button>05</button>
              <button>06</button>
              <button>07</button>
              <button>08</button>
                </div>
              
              </Tabs.Tab>
            
              <Tabs.Tab title="第二程" key="vegetables">
              <h4>在线选座 0/1</h4>
                靠窗<Checkbox>A</Checkbox>
                <Checkbox>B</Checkbox>
                <Checkbox>C</Checkbox>过道<Checkbox>D</Checkbox>
                <Checkbox>E</Checkbox>靠窗
                <br /><br /><br />
                靠窗<Checkbox>A</Checkbox>
                <Checkbox>B</Checkbox>
                <Checkbox>C</Checkbox>过道<Checkbox>D</Checkbox>
                <Checkbox>E</Checkbox>靠窗
                <h5>选车厢 11/人</h5>
                <div className="bn">
                <button>02</button>
              <button>03</button>
              <button>04</button>
              <button>05</button>
              <button>06</button>
              <button>07</button>
              <button>08</button>
                </div>
              </Tabs.Tab>
            </Tabs>
          </Card>
          <div className="pp">
            <span style={{fontSize:'20px'}}>￥672</span>
          <Button block color='danger' size='large' onClick={()=>nav('/pay')} >
            去支付
        </Button>
          </div>
          
        </div>
      </div>
    </div>
  );
}

export default Index;
